/*public*/
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-size: 62.5%; }
a, a:link, a:visited, a:hover, a:active { text-decoration: none!important }
.bg-no { background-color: transparent!important; border: none!important; }
.p-no { padding: 0!important; }
.m-no { margin: 0!important; }
.b-no { border: none!important; }
.text-center { text-align: center }
.pull-left { float: left; }
.pull-right { float: right; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.f-2x { font-size: 3.0rem!important; }
.f-1x { font-size: 2.6rem!important; }
.fw-bold { font-weight: bold!important; }
.wrap { position: fixed; left: 0; bottom: 0; right: 0; top: 0; min-height: 100vh; background: url(../images/bg.png) bottom center no-repeat; background-attachment: fixed; background-size: cover; z-index: -2; }
/*thumb*/
.thumb-circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
/*bg*/
.bg-light-blue { background-color: #A6EDEF }
.bg-blue { background-color: #59BFFD }
.bg-grey { background-color: #f5f5f5; }
.bg-white { background-color: #fff; }
/*blend-link-group*/
.blend-link-group .blend-link { height: 9.2rem; line-height: 9.2rem; width: 40rem; margin: 0 auto; margin-bottom: 1.6rem; }
.blend-link-group .blend-link:nth-child(1) { background: url(../images/btn-yellow.png) no-repeat center; background-size: 100% }
.blend-link-group .blend-link:nth-child(2) { background: url(../images/btn-red.png) no-repeat center; background-size: 100% }
.blend-link-group .blend-link:nth-child(3) { background: url(../images/btn-blue.png) no-repeat center; background-size: 100% }
.blend-link-group .blend-link a, .blend-link-group .blend-link a:hover, .blend-link-group .blend-link a:active { font-size: 3.0rem; font-weight: bold; color: #fff; }
.blend-link-group .blend-link:nth-child(1) a { -moz-text-shadow: -0.2rem 0 0.5rem #F09B02; -webkit-text-shadow: -0.2rem 0 0.5rem #F09B02; text-shadow: -0.2rem 0 0.5rem #F09B02; }
.blend-link-group .blend-link:nth-child(2) a { -moz-text-shadow: -0.2rem 0 0.5rem #E62C0C; -webkit-text-shadow: -0.2rem 0 0.5rem #E62C0C; text-shadow: -0.2rem 0 0.5rem #E62C0C; }
.blend-link-group .blend-link:nth-child(3) a { -moz-text-shadow: -0.2rem 0 0.5rem #1B4EAB; -webkit-text-shadow: -0.2rem 0 0.5rem #1B4EAB; text-shadow: -0.2rem 0 0.5rem #1B4EAB; }
/*user-info*/
.blend-picture.result { width: 53.8rem; height: 41.8rem; }
.user h4.title { margin-top: 3rem; margin-bottom: 1rem; }
.user .blend-card { width: 45rem; margin: 0 auto; }
.user .blend-card-img-view { width: 12.5rem; height: 12.5rem; float: left; }
.user .blend-card-content-view { min-height: 12rem; max-height: none!important; overflow: visible!important }
.user .blend-card-text { min-height: 2.6rem; overflow: inherit!important }
.user-info { height: 36rem; color: #fff; position: relative; }
.user-info .blend-picture-circle img { width: 13rem; height: 13rem; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 0.5rem solid #ADDFFE; }
.user-info .blend-picture { margin: 0 auto!important; padding-top: 2rem; }
.user-info .blend-card-text { font-size: 2.6rem; color: #8A8A8A; }
.user-info figcaption h4, .user-info figcaption p { margin: 0; color: #fff; }
.user-info figcaption h4 { margin-bottom: 1rem; }
.user-info .bar { width: 100%; display: block; position: absolute; bottom: 1.1rem; }
.user-info .bar .info-bar { width: 68rem; height: 1.8rem; margin: 0 auto; background-color: #2AAEEC; -moz-border-radius: 0.9rem; -webkit-border-radius: 0.9rem; border-radius: 0.9rem; }
.user-form form { position: relative; width: 64rem; margin: 0 auto; margin-bottom: 2rem; padding: 3rem 5rem; margin-top: -2rem; -moz-border-radius-bottomleft: 0.8rem; -moz-border-radius-bottomright: 0.8rem; border-bottom-left-radius: 0.8rem; -webkit-border-bottom-left-radius: 0.8rem; -webkit-border-bottom-right-radius: 0.8rem; border-bottom-right-radius: 0.8rem; -moz-box-shadow: 0 0 0.5rem rgba(171,139,110,.38); -webkit-box-shadow: 0 0 0.5rem rgba(171,139,110,.38); box-shadow: 0 0 0.5rem rgba(171,139,110,.38); }
.user-form .blend-formgroup-label { color: #000; font-weight: bold; }
.user-form .blend-formgroup { margin-bottom: 2.0rem }
.user-form input, .user-form select { border: 0.1rem solid #f5f5f5; }
.user-form .tips { color: #8A8A8A; }
.user-form .submit { margin: 1rem auto; }
/*sun*/
.sun { position: absolute; right: 2rem; top: 1rem; width: 10.7rem; height: 10.2rem; background: url(../images/sun.png) top right no-repeat; background-size: 100%; z-index:2 }
/*cloud*/
.cloud-top { width: 75rem; height: 13.4rem; background: url(../images/cloud-top.png) bottom center no-repeat; background-size: 100%; position: relative; z-index: -2 }
.cloud-bot { width: 75rem; height: 16.8rem; background: url(../images/cloud-bot.png) top center no-repeat; background-size: 100%; position: relative; z-index: -2 }
/*bird*/
.bird1 { width: 11.2rem; height: 14.2rem; background: url(../images/green-bird.png) bottom center no-repeat; background-size: 100%; position: absolute; left: 12rem; top: 0.5rem; z-index: 1 }
.bird2 { width: 26.6rem; height: 15rem; background: url(../images/bird.png) bottom center no-repeat; background-size: 100%; position: absolute; right: 12rem; top: 0.5rem; z-index: 1 }
.bird2.right { background: url(../images/bird-right.png) bottom center no-repeat; background-size: 100%; }
.bird2.wrong { background: url(../images/bird-error.png) bottom center no-repeat; background-size: 100%; }
/*button*/
.blend-button-yellow { background-color: #FDA93F; font-size: 16px; color: #fff; height: 8rem; line-height: 8rem; -moz-border-radius: 1rem; -webkit-border-radius: 1rem; border-radius: 1rem; }
.blend-button-yellow:hover, .blend-button-yellow:active { color: #fff; }
/*question-item*/
.questions { position: relative; z-index: 1; }
.question-item { margin-top: 0; margin-bottom: 0; position: relative; }
.question-item .type { position: absolute; width: 10rem; height: 4.8rem; line-height: 4.8rem; text-align: center; color: #44BCBB; border: 1px solid #44BCBB; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 2.6rem }
.question-item .question-btn .blend-button { height: 4.8rem; line-height: 4.8rem; min-width: 16rem; margin-bottom: 0.4rem; text-align: center; -moz-border-radius: 0.5rem; -webkit-border-radius: 0.5rem; border-radius: 0.5rem; }
.question-item .question-btn .next { background-color: #44BCBB; color: #fff; }
.question-item .question-btn .next:hover { background-color: #34A9A8; }
.question-item .question-info { min-height: 12rem; margin: 0; padding-top: 2rem; padding-bottom: 2rem; }
/*answers*/
.answers .blend-formgroup { background-color: transparent!important; text-align: center }
.answers .blend-formgroup input { width: 100%; width: 60rem; margin: 0 auto; margin-bottom: 2.5rem; background: url(../images/btn.png) no-repeat center; background-size: 100%; text-align: center; font-size: 3.0rem; color: #643503; font-weight: bold; padding: 0; height: 7.8rem; line-height: 7.8rem; border: none!important; outline: none!important; }
.answers .blend-formgroup input.right { background: url(../images/btn-right.png) no-repeat center; background-size: 100%; }
.answers .blend-formgroup input.wrong { background: url(../images/btn-wrong.png) no-repeat center; background-size: 100%; }

@media screen and (max-width:1080px) {
html { font-size: 14px; /*满屏按照10px来算*/ }
}

@media screen and (max-width:750px) {
html { font-size: 10px; /*满屏按照10px来算*/ }
}

@media screen and (max-width:675px) {
html { font-size: 9px; /*屏幕等于设计的 9/10, 标准尺寸也缩小到9/10  */ }
}

@media screen and (max-width:600px) {
html { font-size: 8px;/*屏幕等于设计的 8/10, 标准尺寸也缩小到8/10  */ }
}

@media screen and (max-width:525px) {
html { font-size: 7px;/*屏幕等于设计的 7/10, 标准尺寸也缩小到7/10  */ }
}

@media screen and (max-width:450px) {
html { font-size: 6px; }
}

@media screen and (max-width:375px) {
html { font-size: 5px; }
}

@media screen and (max-width:300px) {
html { font-size: 4px; }
}
